<template>
	<base-dropdown
		:options="list"
		:modelValue="modelValue"
		v-model:show="dropdownShow"
		itemClass="h-8 px-2 text-center"
		@select="onSelect">
		<!--	<base-dropdown :title="$t('wallet.orderStatusSelect')" :modelValue="modelValue" @close="onClose">-->
		<div
			class="flex gap-1 items-center justify-center bg-bg-3 w-fit px-2 rounded-[16px] min-w-[104px] h-[34px]">
			<div class="px-[10px] py-[5px]">{{ $t(selectedValue?.name) }}</div>

			<base-icon
				name="down1"
				class="text-t-2 text-sm duration-300"
				:class="{
					'rotate-180': dropdownShow
				}" />
		</div>

		<template #content="{ item }">
			<div class="text-sm">
				{{ $t(item?.content!) }}
			</div>
		</template>
	</base-dropdown>
</template>

<script lang="ts" setup>
import { WalletBalanceStatus } from '@/enums'
import { BaseDropdown, BaseIcon } from '@/components/base'
import { computed, ref } from 'vue'

defineProps({
	modelValue: {
		type: [Number, String],
		default: ''
	},
	statusId: {
		type: [Number, String],
		default: ''
	}
})

const emits = defineEmits(['update:modelValue', 'select'])

const dropdownShow = ref(false)
const list = [
	{
		id: '',
		content: 'BalanceStatus.all'
	},
	{
		id: 3,
		content: 'BalanceStatus.pending',
		color: 'var(--color-warning)'
	},
	{
		id: 1,
		content: 'BalanceStatus.success',
		color: 'var(--color-success)'
	},
	{
		id: 2,
		content: 'BalanceStatus.fail',
		color: 'var(--color-danger)'
	}
]

const tamp = ref('')

const selectedValue: any = computed(() => {
	return Object.values(WalletBalanceStatus).find((val: any) => {
		return val.id === tamp.value
	})
})

const onSelect = (id: any) => {
	tamp.value = id
	emits('select', id)
	emits('update:modelValue', id)
}
</script>
<style lang="scss" scoped>
.wallet-select {
	&__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 25px;
		height: 62px;
		line-height: 62px;
		border-bottom: 1px solid var(--color-border-1);

		.text {
			font-size: 14px;

			text-align: center;
			color: var(--color-text-1);
			&.selected {
				color: var(--color-primary);
			}
		}
	}
}
</style>
